<template>
    <view class="u-wrap">
        <view class="u-search-box">
            <view class="u-search-inner" @click="search">
                <u-icon name="search" color="#909399" :size="28"></u-icon>
                <text class="u-search-text" @click="search">搜索</text>
            </view>
        </view>

        <view class="u-menu-wrap">
            <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="data.scrollTop" style="width: 120rpx;">
                <view v-for="(item, index) in data.tabbar" :key="index" class="u-tab-item"
                    :class="[data.current == index ? 'u-tab-item-active' : '']" :data-current="index"
                    @tap.stop="swichMenu(index, item.c_name)">
                    <text class="u-line-1">{{ item.c_name }}</text>
                </view>
            </scroll-view>


            <block v-for="(item, index) in data.tabbar" :key="index">
                <scroll-view style="width: calc(100% - 120rpx);;" scroll-y class="right-box" v-if="data.current == index">
                    <view class="page-view">
                        <view class="class-item">
                            <view class="item-title">
                                <text>{{ item.c_name }}</text>
                            </view>

                            <view class="item-container">

                                <view class="wrap">
                                    <uni-card style="padding: 0;" v-for="(item, index) in data.goodsData" @click="goXiang(item.g_id)"
                                        :key="index">
                                        <image style="width: 50%;height: 200rpx;" mode="scaleToFill"
                                            :src="item.g_img[0] ? item.g_img[0].url : ''"></image>
                                        <view class="right_text">
                                            <view>{{ item.g_name }}</view>
                                            <view class="shuom">{{ item.g_info }}</view>
                                            <view style="width: 100%;">
                                                <view style="color: red; font-size: 30rpx; font-weight: bold;">￥{{ item.g_price }}</view>
                                            </view>
                                        </view>
                                    </uni-card>
                                </view>

                            </view>
                        </view>
                    </view>
                </scroll-view>
            </block>
        </view>
    </view>
</template>

<script  setup lang="ts">

import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { classParentIdListApi, goodsflListApi } from '../../https/http'
import { onLoad, onReachBottom } from "@dcloudio/uni-app"

onLoad(async () => {
    const res = await classParentIdListApi(10)
    if (res.code == 200) {
        data.tabbar = res.data
        newdatalsit(res.data[0].c_name)
    }

})
const data = reactive<{
    title: string,
    loadStatus: string,
    goodsData:any
    flowList: {}[],
    leftlist: {}[],
    rightlist: {}[],
    tabbar: {
        c_id: number,
        c_name: string,
        level: number
    }[],
    scrollTop: number, //tab标题的滚动条位置
    current: number, // 预设当前项的值
    menuHeight: number, // 左边菜单的高度
    menuItemHeight: number, // 左边菜单item的高度
    currentPage:number,
    pagesize:number
}>({
    title: "Hello",
    loadStatus: 'loadmore',
    flowList: [],
    leftlist: [],
    rightlist: [],
    goodsData: [],
    tabbar: [{
        c_id: 0,
        c_name: "手机",
        level: 1
    },
    {
        c_id: 0,
        c_name: "电脑",
        level: 1
    }

    ],
    scrollTop: 0, //tab标题的滚动条位置
    current: 0, // 预设当前项的值
    menuHeight: 0, // 左边菜单的高度
    menuItemHeight: 0, // 左边菜单item的高度
    currentPage:1,
    pagesize:10
})
const search = () => {
    uni.navigateTo({
        url: "/pages/Search/Search"
    });
}
const newdatalsit =async (id: string) => {
  const res = await goodsflListApi(data.currentPage,1000,id)
  if (res.code == 200) {
    data.goodsData = []
        res.data.forEach(e => {
            if (e.g_img) {
                e.g_img = JSON.parse((e.g_img as any));
            }
            data.goodsData.push(e)
        })
    }

}
const food = (id: string) => {
    newdatalsit(id)

}


const getImg = () => {
    return Math.floor(Math.random() * 35);
}

// 点击左边的栏目切换
const swichMenu = async (index: any, id: any) => {
    data.leftlist = []
    data.rightlist = []
    food(id)
    if (index == data.current) return;
    data.current = index;
    // 如果为0，意味着尚未初始化
    if (data.menuHeight == 0 || data.menuItemHeight == 0) {
        await getElRect('menu-scroll-view', 'menuHeight');
        await getElRect('u-tab-item', 'menuItemHeight');
    }
    // 将菜单菜单活动item垂直居中
    data.scrollTop = index * data.menuItemHeight + data.menuItemHeight / 2 - data.menuHeight / 2;
}

// 获取一个目标元素的高度
const getElRect = (elClass: any, dataVal?: any) => {
    new Promise((resolve, reject) => {
        const instance = getCurrentInstance();
        const query = uni.createSelectorQuery().in(this);
        query.select('.' + elClass).fields({
            size: true
        }, res => {
            // 如果节点尚未生成，res值为null，循环调用执行
            if (!res) {
                setTimeout(() => {
                    getElRect(elClass);
                }, 10);
                return;
            }
            // this[dataVal] = res.height;
        }).exec();
    })
}
const goXiang = (id:number) => {
    uni.navigateTo({
    url: `/pages/detail/detail?g_id=${id}`
  });
}

</script>

<style lang="scss" scoped>
	.wrap{
		width: 100%;
		.right_text{
			width: 50%;
			height: 200rpx;
			box-sizing: border-box; 
			padding: 20rpx; 
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.shuom{
				width: 100%;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
::v-deep.uni-card__content{
    display: flex;
}
.u-wrap {
    // height: calc(100vh);
    /* #ifdef H5 */
    // height: calc(100vh - var(--window-top));
    /* #endif */
    display: flex;
    flex-direction: column;
}

.u-search-box {
    padding: 18rpx 30rpx;
}

.u-menu-wrap {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.u-search-inner {
    background-color: rgb(234, 234, 234);
    border-radius: 100rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 16rpx;
}

.u-search-text {
    font-size: 26rpx;
    margin-left: 10rpx;
}

.u-tab-view {
    width: 200rpx;
    height: 100%;
}

.u-tab-item {
    height: 110rpx;
    background: #f6f6f6;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    color: #444;
    font-weight: 400;
    line-height: 1;
}

.u-tab-item-active {
    position: relative;
    color: #000;
    font-size: 30rpx;
    font-weight: 600;
    background: #fff;
}

.u-tab-item-active::before {
    content: "";
    position: absolute;
    height: 32rpx;
    left: 0;
    top: 39rpx;
}

.u-tab-view {
    height: 100%;
}

.right-box {
    background-color: rgb(250, 250, 250);
}

.page-view {
    padding: 16rpx;
    height: 100vh;
}

.class-item {
    margin-bottom: 30rpx;
    background-color: #fff;
    padding: 16rpx;
    border-radius: 8rpx;
    height: 100vh;
}

.item-title {
    font-size: 26rpx;
    font-weight: bold;
}

.item-menu-name {
    font-weight: normal;
    font-size: 24rpx;
}

.item-container {
    display: flex;
    flex-wrap: wrap;
}

.thumb-box {
    width: 33.333333%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 20rpx;
}

.u-column {
    flex: 0;
}

.item-menu-image {
    width: 120rpx;
    height: 120rpx;

}




.divder {
    margin-top: 100rpx;
}

.demo-warter {
    border-radius: 8px;
    margin: 5px;
    height: 300rpx;
    width: 252rpx;
    background-color: #ffffff;
    padding: 8px;
    position: relative;
}

.u-close {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
}

.demo-image {
    width: 100%;
    border-radius: 4px;
}

.demo-title {
    font-size: 30rpx;
    margin-top: 5px;
}

.demo-tag {
    display: flex;
    margin-top: 5px;
}

.demo-tag-owner {
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 4rpx 14rpx;
    border-radius: 50rpx;
    font-size: 20rpx;
    line-height: 1;
}

.demo-tag-text {
    margin-left: 10px;
    border-radius: 50rpx;
    line-height: 1;
    padding: 4rpx 14rpx;
    display: flex;
    align-items: center;
    border-radius: 50rpx;
    font-size: 20rpx;
}

.demo-price {
    font-size: 30rpx;
    margin-top: 5px;
}</style>
